<template>
  <div class="p-l-15 p-r-15" style="padding-bottom:100px;">
      <van-nav-bar
      fixed
      >
        <div style="position: relative;" slot="title">
          <div style="color:#FFFFFF;font-size:14px;width:100px;">NFT</div>
          <img :src="require('@/assets/imgs/134134132.png')" style="width:12px;height:12px;position: absolute;
    right: 24px;
    top: 0;"/>
        </div>
      </van-nav-bar>
      <div style="padding-top:50px;"></div>
      <van-collapse v-model="activeNames"  accordion @change="accordionChange">
          <van-collapse-item :title="`我寄售的（${mySaleList.length}）`" name="1">
              <div slot="title" class="view flex-row align-center">
                  <img :src="require('@/assets/imgs/12314214.png')" style="width:24px;height:24px;margin-right:5px;"/>
                  <div style="color:#FE974F;font-size:14px;">{{ `我寄售的（${mySaleList.length})` }}</div>
              </div>
              <div class="view flex-row flex-wrap" style="margin-right:-15px;" v-if="mySaleList.length > 0">
                  <div style="width:calc(100% / 2 - 40px);background-color:#24232D;padding-top: 15px;padding-bottom: 15px;border-radius: 10px;" class="p-l-12 p-r-12 view align-center m-r-15 m-b-15" v-for="(item,index) in mySaleList" :key="index">
                      <div style="border-radius: 15px;" class="m-b-15">
                          <img :src="item.originalNft && item.originalNft.image"  style="width:100%;height:100%;"/>
                      </div>
                      <div class="width100">
                          <div style="color: #fff;" class="fz-14 m-b-12">{{ item.originalNft && item.originalNft.name  }}</div>
                          <div style="color:#EC954F;" class="fz-18">{{ item.price }}</div>
                      </div>
  
                      <div class="view flex-row align-end  justify-between width100">
                          <div style="color:#707070;font-size:12px;margin-right: 12px;">{{item.create_time.replace('2022-', '')}}</div>
                          <van-button type="primary" round color="linear-gradient(180deg, #FE9C52 0%, #FE7A3F 100%)" size="small" @click="downPro(item)">下    架</van-button>
                      </div>
                  </div>
              </div>
              <van-empty
                v-else
                class="custom-image"
                image="https://taiyuanpower.oss-cn-hangzhou.aliyuncs.com/wxapp/x/2412341234.png"
                />
          </van-collapse-item>


          <van-collapse-item title="寄售市场（633)" name="2">
              <div slot="title" class="view flex-row align-center">
                  <img  :src="require('@/assets/imgs/2134141.png')" style="width:24px;height:24px;margin-right:5px;"/>
                  <div style="color:#FE974F;font-size:14px;">{{ `寄售市场（${marketList.length})` }}</div>
              </div>

              <div class="view flex-row align-center justify-between m-b-20">
                  
                  <div>
                      <van-button style="width:156px;background: transparent;" round color="#D5BFB2" plain  type="info" icon="filter-o" @click="doFilter">筛选</van-button>
                  </div>
              </div>

              <van-list
                
                v-model="loading"
                :finished="finished"
                @load="getMore"
                finished-text="没有更多了"
                >
                <div class="view flex-row flex-wrap" style="margin-right:-15px;">
                    <template v-if="marketList.length > 0">
                            <div style="width:calc(100% / 2 - 40px);background-color:#24232D;padding-top: 15px;padding-bottom: 15px;border-radius: 10px;" class="p-l-12 p-r-12 view align-center m-r-15 m-b-15" v-for="(item,index) in marketList" :key="index" >
                                <div style="border-radius: 15px;"  @click="prevImg(item.originalNft.image)">
                                    <img data-position="2" data-blur="4" data-focus="200" data-falloff="400" data-direction="y" :src="item.originalNft && item.originalNft.image"  class="tiltshift" style="width:100%;height:100%;" />
                                </div>
                                <div style="width:100%;">
                                    <div style="color: #fff;margin-bottom:5px;" class="fz-14">{{ item.originalNft && item.originalNft.name }}</div>
                                    <div style="color:#EC954F;" class="fz-18">{{ item.price }}</div>
                                </div>
            
                                <div class="view flex-row align-end  justify-between width100">
                                    <div style="color:#707070;font-size:12px;">{{item.create_time.replace('2022-', '')}}</div>
                                    <van-button type="primary" round color="linear-gradient(180deg, #FE9C52 0%, #FE7A3F 100%)" style="width:60px;" size="small" @click="toBuy(item)">购买</van-button>
                                </div>
                            </div>
                    </template>
                    <van-empty
                        v-else
                        class="custom-image"
                        image="https://taiyuanpower.oss-cn-hangzhou.aliyuncs.com/wxapp/x/2412341234.png"
                    />

                </div>
            </van-list>
          </van-collapse-item>
      </van-collapse>
      <Tabbar/>
      <van-image-preview v-model="showPrev" :images="images"  />
      <buy ref="buyOpen" @onSuccess="toHome"/>
      <down ref="downOpen" @onSuccess="fetchMyNft"/>
      <van-action-sheet v-model="showAction" :closeable="false">
            <div class="content">
                    <van-picker
                        show-toolbar
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="onCancel"
                        @change="onChange"
                    />
            </div>
      </van-action-sheet>
  </div>

</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
import buy from '@/components/buy'
import down from '@/components/down'
import { myNftJSListData, nftListDataMarkets } from '@/api/index'
export default {
  components:{
      Tabbar,
      buy,
      down
  },
  data: function () {
    return {
        active: 0,
        images: [],
        columns: [ '金额从高到低', '金额从低到高'],
        showAction:false,
        showPrev: false,
        loading: false,
        finished: false,
        activeNames: '2',
        mySaleList: [],
        marketList: [],
        queryForm: {
            pages: 0,
            limit: 8
        },
    }
  },
  mounted() {
    this.queryForm.pages = 1
    this.fetchMyNft()
    this.fetchNftListDataMarkets()
  },
  methods:{
    doFilter() {
        this.showAction = true
    },
    onChange(picker, val) {
        
    },
    onCancel() {
        this.showAction = false
    },
    onConfirm(val) {
        if (val == '金额从高到低') {
            this.queryForm.order_type = 3
        } else {
            this.queryForm.order_type = 4
        }
        this.showAction = false
        this.queryForm.pages = 1
        this.fetchNftListDataMarkets()
    },
    toHome() {
        this.$dialog.alert({
            message: '购买NFT之后您将可以领取收益。'
        }).then(() => {
            // on close
            this.$router.replace({
                path: '/home'
            })
        })
        
    },
    // 下架
    downPro(item) {
        this.$refs.downOpen.show(item)
    },
    toBuy(item) {
        this.$refs.buyOpen.show(item)
    },
    accordionChange(activeNames) {
        if (activeNames == 1) {
            this.fetchMyNft()
        } else if (activeNames == 2) {
            this.fetchNftListDataMarkets()
        }
    },
    prevImg(img) {
        this.images = [img]
        this.showPrev = true
    },
    getMore() {
        this.queryForm.pages++
        this.fetchNftListDataMarkets()
    },
    // 获取寄售市场数据
    async fetchNftListDataMarkets () {
       const res =  await nftListDataMarkets(this.queryForm)
        this.loading = false
        if (this.queryForm.pages == 1) {
            this.marketList = res.data.list
        } else {
            this.marketList = [...this.marketList, ...res.data.list]
        }
        this.$nextTick( () => {
            $('.tiltshift').tiltShift();
        })
        this.total = res.data.total
        if (this.marketList.length == res.data.total) {
            this.finished = true;
        }
    },
    // 我的寄售
    async fetchMyNft() {
        const res = await myNftJSListData({})
        this.mySaleList = res.data
    },
  }

}
</script>

<style>
.custom-image {margin:  0 auto;}
.view {display: flex;flex-direction: column;}
.height100 {height: 100%;}
.width100 {width: 100%;}
.flex-row {flex-direction: row;}
.flex-1 {flex: 1;}
.flex-2 {flex:2;}
.flex-1-50 {flex: 0 0 50%;}
.flex-wrap {flex-wrap: wrap;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-center {justify-content:center;}
.ovhidden {overflow: hidden;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.align-stretch {align-items:stretch;}
.c-333 {font-size: #333;}
.fz-20 {font-size: 30px;}
.c-663 {color: #66625C;}
.c-d7c {color: #D7C19A;}
.fz-12 {font-size: 12px;}
.fz-14 {font-size: 14px;}
.fz-18 {font-size: 18px;}
.c-fff {color: #fff;}
.width100 {width: 100%;}
.p-l-24 {padding-left: 24px;}
.p-r-24 {padding-right: 24px;}
.p-t-16 {padding-top: 16px;}
.m-b-36 {margin-bottom: 36px;}
.b-r-radius-20 {border-radius: 20px;}
.bg-242 {background-color: #24232D;}
body {background-color: #19181F;}
.m-b-30 {margin-bottom: 30px;}
.p-l-30 {padding-left: 30px;}
.p-r-30 {padding-right: 30px;}
.p-t-20 {padding-top: 20px;}
.p-b-20 {padding-bottom: 20px;}
.p-r-20 {padding-right: 20px;}
.p-l-20 {padding-left: 20px;}
.bold {font-weight: bold;}
.c-070 {color: #707070;}
.m-r-20 {margin-right: 20px;}
.m-b-5 {margin-bottom: 5px;}
.van-tabbar {background: #19181F;}
.van-tabbar-item {background: #19181F;}
[class*=van-hairline]::after {content: none !important;}
.van-collapse-item__title {
    background: transparent;
    border: 1px solid #D7C19A;
    border-radius: 20px;
    color: #FE974F;
}
.van-nav-bar {
  background-color: #19181F;
}
.m-b-15 {margin-bottom: 15px;}
.m-r-15 {margin-right: 15px;}
.p-l-12 {padding-left: 12px;}
.p-r-12 {padding-right: 12px;}
.m-b-12 {margin-bottom: 12px;}
.p-l-15 {padding-left: 15px;}
.p-r-15 {padding-right: 15px;}
.m-b-20 {margin-bottom: 10px;}
.van-cell--clickable:active {background-color: transparent;}
.van-collapse-item__content {background-color: transparent;padding: 12px 0;}
.s-bg-imgs {background-image: url(../assets/imgs/12341.png);background-size: cover;background-repeat: no-repeat;background-position: center;}
.van-collapse-item {margin-bottom: 15px;}
</style>